<template>
  <div>
    <a-form-model layout="inline" :model="form" class="form-wrapper">
      <a-form-model-item :label="$t('all.autotext992')">
        <a-select
          style="width: 300px"
          v-model="form.proId"
          :placeholder="$t('all.autotext1348')"
          default-value="0"
          allowClear
        >
          <a-select-option v-for="item in projects" :key="item.id" :value="item.id">
            {{ item.no }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1466')">
        <a-select
          style="width: 300px"
          v-model="form.status"
          :placeholder="$t('all.autotext1348')"
          default-value="0"
          allowClear
        >
          <a-select-option v-for="item in $const.SIGNING_STATUS" :key="item.value" :value="item.value">
            {{ item.desc }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button class="search" type="primary" @click="search()">
          {{ $t('all.autotext30') }}
        </a-button>
        <a-button class="reset">{{ $t('all.autotext340') }}</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-table
      ref="table"
      size="default"
      :rowKey="record => record.id"
      bordered
      :columns="columns"
      :data-source="records"
      :loading="loading"
    >
      <template slot="id" slot-scope="text, record, index">
        {{ index | getPageIndex($refs.table) }}
      </template>
      <template slot="createTime" slot-scope="text, record">
        {{ record.createTime | moment() }}
      </template>
      <template slot="status" slot-scope="text, record">
        {{ record.status | enumValueByKey($const.SIGNING_STATUS) }}
      </template>
      <template slot="operation" slot-scope="text, record">
        <a @click="clickView(record)">{{ $t('all.autotext568') }}</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import { getContractList } from '@api/entrance/record'
import { selectSubjectProjectV2 } from '@api/cost/cost'

export default {
  name: 'contract-index',
  data () {
    const columns = [
      {
        title: this.$t('all.autotext334'),
        key: 'id',
        dataIndex: 'id',
        scopedSlots: { customRender: 'id' }
      },
      {
        title: this.$t('all.autotext992'),
        key: 'no',
        width: '260px',
        dataIndex: 'no'
      },
      {
        title: this.$t('all.autotext796'),
        key: 'fileName',
        dataIndex: 'fileName'
      },
      {
        title: this.$t('all.autotext901'),
        key: 'account',
        dataIndex: 'account'
      },
      {
        title: this.$t('all.autotext58'),
        key: 'createTime',
        dataIndex: 'createTime',
        scopedSlots: { customRender: 'createTime' }
      },
      {
        title: this.$t('all.autotext1466'),
        key: 'status',
        dataIndex: 'status',
        scopedSlots: { customRender: 'status' }
      },
      {
        title: this.$t('all.autotext187'),
        dataIndex: 'operation',
        scopedSlots: { customRender: 'operation' }
      }
    ]
    return {
      columns,
      loading: false,
      projects: [], // 临床试验方案编号下拉框
      form: {
        proId: '',
        status: ''
      },
      pageSize: null,
      records: []
    }
  },
  created () {
    this.fetchProjects()
    this.fetchRecords()
  },
  methods: {
    search () {
      this.fetchRecords()
    },
    // 点击查看
    clickView ({ id }) {
      this.$router.push({
        name: 'ContractDetail',
        query: {
          id
        }
      })
    },
    fetchProjects () {
      selectSubjectProjectV2({})
        .then(res => {
          this.projects = res
        })
    },
    fetchRecords () {
      this.loading = true
      const params = Object.assign({}, this.form)
      getContractList(params)
        .then(res => {
          this.loading = false
          this.records = res
        }).catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.search {
  background: #43D8D2;
  border: none;
  width: 112px;
  height: 32px;
  margin-right: 24px;
  border-radius: 4px;
}
.reset {
  width: 112px;
  height: 32px;
  border-color: #0578B8;
  border-radius: 4px;
  color: #0578B8;
}
.form-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 24px;
}
</style>
